<!doctype html>
<html lang="en">
    <head>
	<title>jQuery UI Dialog - Modal form</title>
	<link type="text/css" href="/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
	<link href="css/style.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
	<script type="text/javascript" src="/js/dialogs.js"></script>
	<script type="text/javascript" src="js/confabulate.js" charset="utf8"></script>
	<!--<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js" type="text/javascript"></script>-->

	<style type="text/css">

	    fieldset { padding:0; border:0; margin-top:25px; }
	    div#users-contain {  width: 350px; margin: 20px 0; }
	    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
	    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
	    .ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
	    .ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }

	</style>
	<script type="text/javascript">
            $(document).ready(function(){
		$RTC_marker_dialog.init({
		    form_input_ids:['marker_label','marker_desc','marker_size','marker_color'],
		    feedback_element_id:'validateTips',
		    dialog_id:'dialog',
		    close_callback:function(){alert('x')}
		});
		//, , );
            });
        </script>
    </head>
    <body>

	<div class="demo">

	    <div id="dialog" title="Create new user">
		<p id="validateTips">All form fields are required.</p>

		<form action="">

		    <fieldset><legend></legend>
			<label for="marker_label">Label</label>
			<input type="text" name="marker_label" id="marker_label" class="text ui-widget-content ui-corner-all" />
			<label for="marker_desc">Description</label>
			<textarea name="marker_desc" id="marker_desc" value="" class="text ui-widget-content ui-corner-all" ></textarea>
			<label for="marker_size">label font size</label>
			<input type="text" name="marker_size" id="marker_size" value="" class="text ui-widget-content ui-corner-all" />
			<label for="marker_color">label color</label>
			<input type="text" name="marker_color" id="marker_color" value="" class="text ui-widget-content ui-corner-all" />

		    </fieldset>
		</form>
	    </div>


	    <div id="users-contain" class="ui-widget">

		<h1>Existing Users:</h1>


		<table id="users" class="ui-widget ui-widget-content">
		    <thead>

			<tr class="ui-widget-header ">
			    <th>Name</th>
			    <th>Email</th>
			    <th>Password</th>
			</tr>
		    </thead>
		    <tbody>

			<tr>
			    <td>John Doe</td>
			    <td>john.doe@example.com</td>
			    <td>johndoe1</td>
			</tr>
		    </tbody>
		</table>

	    </div>
	    <button id="create-user" class="ui-button ui-state-default ui-corner-all">Create new user</button>

	</div><!-- End demo -->

	<div class="demo-description">

	    <p>Use a modal dialog to require that the user enter data during a multi-step process.
		Embed form markup in the content area, set the <code>modal</code> option to true, and specify
		primary and secondary user actions with the <code>buttons</code> option.</p>

	</div><!-- End demo-description -->

    </body>
</html>